<template>
  <page-main class="page-appointment-index page-pay-detail">
    <div class="p-t-15"></div>
    <div class="fly-panel m-x-15">
      <div class="flex-block">
        <span>姓名：{{ info.custName }}</span>
        <span>性别：{{ $util.setName(info.sex, init_data.sex_list) }}</span>
        <span>年龄：{{ info.age }}</span>
      </div>
      <div class="hd">
        <div>日期： {{ info.createTime }}</div>
      </div>
      <div class="bd">
        <p>合计：<b class="c-red">￥{{ info.totalPrice }}</b></p>
        <p :class="'pay-status status-' + info.payStatus">{{ $util.setName(info.payStatus, init_data.payStatus_list) }}</p>
      </div>
    </div>
    <van-cell-group inset>
      <van-cell><b>费用明显</b></van-cell>
      <van-cell v-for="(item,index) in info.listVo" :key="index" :title="item.name" :label="'单价：' + item.price +'，数量：' + item.totalQuantity">
        <span class="c-red">￥{{ item.totalPrice }}</span>
      </van-cell>
    </van-cell-group>
    <div v-if="info.payStatus == '1'" class="m-t-15">
      <van-cell-group inset >
        <van-cell><fly-info slot="title" label="订单编号" :value="info.theBillId"/></van-cell>
        <van-cell><fly-info slot="title" label="支付时间" :value="info.payTime"/></van-cell>
      </van-cell-group>
      <div class="m-a-15">
        <van-button type="info" plain block @click="goback">返回</van-button>
      </div>
    </div>
    <van-submit-bar :loading="btn_loading" button-text="确认支付" button-color="#1989fa" @submit="submitPay" v-if="info.payStatus == 0">
      <div>支付金额：<b class="c-red">￥{{ info.totalPrice }}</b></div>
    </van-submit-bar>
  </page-main>
</template>
<script>
import flyInfo from '@/components/FlyInfo';
export default {
  components:{
    flyInfo
  },
  data(){
    return {
      info:{
        listVo: [],
        totalPrice: 0,
      },
      init_data:{},
      btn_loading: false,
    }
  },
  created(){
    this.getInitData();
  },
  methods:{
    async getInitData(){
      this.init_data.sex_list = await this.$util.getDictList('sex_type');
      this.init_data.theType_list = await this.$util.getDictList('the_type');
      this.init_data.payStatus_list = await this.$util.getDictList('pay_status');
      this.getDetail();
    },
    getDetail(){
      this.$http('get', '/admin/bill/GetBillDetails', {theBillId: this.$route.query.theBillId}, (data,msg) => {
        this.info = data;
        this.getTotalPirce(data.listVo);
      })
    },
    getTotalPirce(list){
      let totalPrice = 0;
      list.forEach(item => {
        totalPrice += item.totalPrice;
      });
      this.info.totalPrice = totalPrice;
    },
    goback(){
      this.$router.go(-1)
    },
    async submitPay(){
      let params = {
        openId: localStorage.getItem('openId'),
        paymentType:2,
        theBillId: [this.info.theBillId],
        totalPaymentAmt: this.info.totalPrice
      };
      this.btn_loading = true;
      this.$toast.loading({
        message: '支付中，请稍等...',
        forbidClick: true,
      });
      this.$store.dispatch('submitAndPayGet', params).then(res => {
        setTimeout(() => {
          this.$toast.clear();
          this.btn_loading = false;
        }, 5000);
      }).catch(error => {
        this.$toast.clear();
        this.btn_loading = false;
      })      
    }
  }
}
</script>